<template>
  <div class="container">
    <div class="app-container">
      <el-row type="flex" justify="space-between">
        <el-col :span="5" style="margin-right:20px;">
          <el-tree ref="tree" :data="orgList" node-key="id" :props="defaultProps" icon-class="el-icon-folder-checked" style="font-size: 14px;color: #2a2929;margin-top:10px;border-radius: 3px;height: 100%;" @node-click="treeChange" />
        </el-col>
        <el-col>
          <div class="right-title">
            <el-row type="flex" justify="space-between">
              <span>作业范围</span>
              <el-button v-if="visibal" type="primary" style="background: #e15536;width: 90px;border:0px" @click="visibal=false">编辑</el-button>
              <span v-else>
                <el-button type="primary" style="background: #e15536;width: 90px;border:0px">提交</el-button>
                <el-button style="width: 90px;" @click="visibal = true">取消</el-button>
              </span>
            </el-row>
            <div class="main">

              <span>地区关键词：<el-input v-model="address" placeholder="请输入地区关键词" style="width:230px;height: 40px;margin-bottom: 20px;" />
              </span>
              <div v-if="!visibal">
                <el-button type="primary" class="draw">开始绘制</el-button>
                <p class="tipWork">
                  <i class="el-icon-warning" style="font-size: 20px;width: 14px; vertical-align: middle; margin-bottom: 2px; margin-right: 6px;color:rgb(255, 154, 36)" />
                  点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围</p>
              </div>

              <baidu-map class="bm-view" :center="address ? address:center" scroll-wheel-zoom :zoom="zoom" @ready="handler">

                <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
                <!-- animation="BMAP_ANIMATION_BOUNCE" 表示表示标注的动画效果：跳动动画 -->
                <!-- :dragging="true"  拖拽地图过程中触发 -->
                <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @click="checkDetail">
                  <!-- <bm-info-window :title="showTitle" :show="showFlag" /> -->

                  <bm-label :content="content?content:''" :label-style="{color: 'red', fontSize : '16px'}" :offset="{width: -35, height: 30}" />
                </bm-marker>
                <!-- path 根据坐标数组 实现画线功能 -->
                <bm-polygon
                  :path="polygonPath"
                  stroke-color="#e85552"
                  fill-color="rgba(232,85,82,0.30)"
                  :fill-opacity="0.9"
                  :stroke-opacity="0.5"
                  :stroke-weight="2"
                />
                <!--  把搜索到的地区给 keyword 就会生成一个地标 -->
                <bm-local-search
                  :location="
                    address"
                  :keyword="address"
                  :auto-viewport="true"
                />

              </baidu-map>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getOrgAPI, getOrgDetailAPI, getScopeAPI } from '@/api/basic'
export default {
  name: 'Work',
  data() {
    return {
      orgList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      center: { lng: 0, lat: 0 }, // 地图的中心定位 可以是文字 也可以是对象，如{lng: 116.404, lat: 39.915}
      zoom: 0,
      address: '',
      visibal: true,
      showTitle: '信息窗口',
      showFlag: false, // 地图窗口显示与隐藏
      content: '',
      keyword: '',
      polygonPath: []
    }
  },
  watch: {
    address(newValue) {
      this.showTitle = newValue
    }
  },
  created() {
    this.getOrgList()
  },
  methods: {
    checkDetail() {
      this.showFlag = !this.showFlag
    },
    async getOrgList() {
      const res = await getOrgAPI()
      // 将数组格式的字符串转换成数组
      // const arr = eval('(' + res.data.data + ')')
      const arr = JSON.parse(res.data.data)
      this.orgList = arr
    },
    handler({ BMap, map }) {
      // ready：地图加载开始执行的函数 他有两个参数一个是BMap一个是map 如果想在组件中使用他们，可以通过赋值
      console.log(BMap, map)
      this.center.lng = 113.43462
      this.center.lat = 23.13527
      // zoom: 缩放的等级
      // scroll-wheel-zoom：是否允许鼠标滚轮缩放 默认是false
      this.zoom = 15
    },
    async treeChange(data) {
      // 切换树获取机构信息
      const res = await getOrgDetailAPI(data.id)
      console.log(112, res.data.data)
      this.center.lng = res.data.data.longitude
      this.center.lat = res.data.data.latitude
      this.formData = res.data.data
      this.content = res.data.data.name
      // 判断是否为 tree 的第三级
      if (this.formData.type === 3) {
        // 获取到该区域的作业范围
        const res = await getScopeAPI(this.formData.id, 1)
        // 把获取多边形坐标数组存起来
        this.polygonPath = res.data.data.polygon.map(item => {
          return { lat: item.latitude, lng: item.longitude }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.right-title{
  background-color: #fafafa;
  color : #2a2929;
  font-weight: 700;
  font-size: 16px;
  margin-top:10px;
  padding: 18px 20px;
  border-radius: 3px;

}
.main{
  background-color: #fff;
   margin-top: 2px;
   padding-top: 30px;
}
.bm-view {
  width: 100%;
  height: 668px;
}
.draw{
  width: 96px;
  border:1px solid #f3917c;
  background: #ffeeeb;
  color:#e15536;
}
.tipWork{
    font-size: 12px;
    color: rgb(198, 126, 18);
    width: 100%;
    background: rgb(255, 245, 231);
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
}
</style>
